<template>
	<view style="width:94%;margin:0 auto;">
		<view class="search-view">
			<u-icon name="map" color="#000"  labelColor="#000" :label="city_str" @click="cityshow = true"></u-icon>
			<view style="width:3%;"></view>
			<view style="width: 60%;">
				<u-search placeholder="请输入俏佳人名称" v-model="keyword" bgColor="#fff" :showAction="false" @search="search" ></u-search>
			</view>
		</view>
		<view class="tag-view" style="justify-content: space-between">
			<u-tag type="success" :text="item.name" :bgColor="sortCurr==index?'#24c373':'#fff'" :color="sortCurr==index?'#fff':'#000'"
				:borderColor="sortCurr==index?'#24c373':'#fff'" @click="changeSort(index)" v-for="(item,index) in category" :key="index"></u-tag>
			<view style="width:20rpx"></view>
      <view class="sort" @click="show = true">
        <view>{{order_str}}</view>
        <u-icon name="arrow-down"></u-icon>
      </view>
		</view>

		<view>
			<techList @click="to('/pages/order/create',{})" :dataList="dataList" :goods_id="goods_id"></techList>
		</view>

		<view style="width:100%;height: 100rpx;"></view>
    <u-select v-model="show" :list="list" @confirm="confirm" @cancel="cancel"></u-select>
	<u-select v-model="cityshow" :list="citylist" @confirm="confirmcity" @cancel="cancelcity" value-name="id" label-name="name"></u-select>
	</view>
</template>

<script>
	import techList from '@/components/shopro-tech/shopro-techList.vue'
  import Auth from "@/shopro/permission/index.js";
	export default {
		components:{
			techList
		},
		data() {
			return {
				cityshow:false,
				show: false,
				city_str:'正在定位...',
				goods_id: 0,
				order_str:'排序',
				list: [
				  {
					value: '0',
					label: '距离'
				  },
				  {
					value: '1',
					label: '服务数'
				  }
        ],
        jsuser: {},
				keyword: '',
				sortCurr: 0,
        page: 1,
		limit:6,
        dataList: [
        ],
		order:0,
        projectList: [
        ],
        lng: '113.758418',
        lat: '23.027308',
        category_id: 165,
		teacher_id:0,
        category:[],
		citylist:[],
        city_id:'',
        goods_id:0,
			}
		},
		onReachBottom(){
			this.page++;
			this.getjishi()
		},
		async onShow() {
			this.page = 1
			let goods_id = uni.getStorageSync('goods_id')
			if(typeof(goods_id) != 'undefined' && goods_id){
				this.goods_id = uni.getStorageSync('goods_id')
			}
		
			 this.getLocation()
		},
		async onLoad() {
			this.catelist()
			
			
			this.getcity()
			
		},
		onHide() {
			uni.removeStorageSync('goods_id')
		},
		methods: {
		  getcity(){
			let that = this  
			that.$http('category.city').then(res => {
				that.citylist = res.data
			});
      },
      cancel(){
        this.show = false
      },
	  cancelcity(){
		  this.cityshow = false
	  },
	  search(e){
		  let that = this
		  that.keyword = e
		  that.page = 1
		  that.getjishi()
	  },
      // 获取技师列表
      confirmcity(e) {
          let that = this
          that.city_str = e[0].label
          that.city_id = e[0].value
          that.page = 1
          that.getjishi()
      },
	  confirm(e){
		  let that = this
		  that.order_str = e[0].label
		  that.order = e[0].value
		  that.page = 1
		  that.getjishi()
	  },
      catelist(){
        this.$http('category.detail', {
          id:164,
          is_getCate:1
        }).then(res => {
            this.category = res.data.children;
            //this.category_id = this.category[0].id
			this.getcity()
           
        });
      },
	 
		changeSort(index) {
			this.sortCurr = index;
			this.category_id = this.category[index].id
			this.getjishi()
			
		},
      // 获取位置
      async getLocation() {
        let that = this
		uni.showLoading({
		  title: '定位中...',
		  mask: true
		});
        let authState = await new Auth("userLocation").check();
        // #ifdef MP ||　APP-VUE
        authState &&
        uni.getLocation({
          type: "gcj02",
		  geocode:true,
          success: (res) => {
			console.log(res)
			uni.hideLoading();
            that.lng = res.longitude;
            that.lat = res.latitude;
			
            that.getjishi()
          },
          fail: (err) => {
            console.log("确认订单自提位置：", err);
          },
        });
        // #endif
        // #ifdef H5
        console.log('开始定位111111111111')
        uni.getLocation({
          type: "gcj02",
		  isHighAccuracy:true,
          success: (res) => {
			console.log(res)
            that.lng = res.longitude;
            that.lat = res.latitude;
            uni.setStorageSync('lat',that.lat)
            uni.setStorageSync('lng',that.lng)
			that.getaddresslatlng()
            that.getjishi()
			that.$http('technician.updateLocation', {lat:that.lat,lng:that.lng,address:res.address}, '定位成功...').then(res => {})
          },
          fail: (err) => {
            console.log("确认订单自提位置：", err);
          },
        });
        // #endif
      },
	  getaddresslatlng(){
		  let  that = this
		  that.$http(
		      'technician.getaddresslatlng',
		      {
				  lat:this.lat,
				  lng:this.lng
			  },'加载中...'
          ).then(res => {
				that.city_str = res.data
		  })	  
	  },
      getjishi(){
          let  that = this
          that.$http(
              'technician.getjishi',
              {
                page: that.page,
                limit: that.limit,
                keyword: that.keyword,
                goods_id: that.goods_id,
                lng: that.lng,
                lat: that.lat,
                order: that.order,
                category_id: that.category_id,
                city_id: that.city_id?that.city_id:0
              },
              '加载中...'
          ).then(res => {
            if (res.code == 1) {
				if(that.page > 1){
					that.dataList = that.dataList.concat(res.data.data)
				}else{
					that.dataList = res.data.data
				}
            } else {
                that.$util.showToast({
                  title: res.msg
                })
            }
          }).catch(error => {
            that.$util.showToast({
              title: '网络错误'
            })
          });
      },
			to(url,params){
				uni.navigateTo({
					url:url,
					data:params
				})
			}
		}
	}
</script>

<style>
	@import url('index.css');
  .sort {
    display: flex;
  }
</style>
